<template>
  <div
    class="common-page page-stats-article-gzzb"
    v-loading.fullscreen="loading"
  >
    <div class="common-page__head">
      <!-- <comp-paths class="route" :paths="['/stats', $route.fullPath]"></comp-paths> -->
      <div class="title">
        <div class="text">{{ $options.title }}</div>
        <el-date-picker
          type="date"
          v-model="startTime"
          size="small"
          style="margin-right: 12px; width: 200px"
          format="起始yyyy年M月d日"
          value-format="timestamp"
          placeholder="起始日期"
          :readonly="loading"
          @change="search()"
        ></el-date-picker>
        <el-date-picker
          type="date"
          v-model="endTime"
          size="small"
          style="margin-right: 12px; width: 200px"
          format="截止yyyy年M月d日"
          value-format="timestamp"
          placeholder="截止日期"
          :readonly="loading"
          @change="search()"
        ></el-date-picker>
          <el-button
        style="width: 100px;  float: right"
        type="primary"
        size="small"
        @click="exportExcel"
        >导出Excel</el-button
      >
      </div>
    </div>
    <div class="common-page__body page-stats-article-policy__body">
      <!-- <div class="row">
                <div class="col  col--2em">序号</div>
                <div class="col">政策分类</div>
                <div class="col col--4em">已发布</div>
            </div>
            <div class="row" v-for="(tag, index) in tagList" :key="tag.id">
                <div class="col col--2em">{{ index + 1 }}</div>
                <div class="col">{{ tag.name }}</div>
                <div class="col col--4em">{{ tag.stats.articlesTotal }}</div>
            </div>
            <div class="row">
                <div class="col col--2em">-</div>
                <div class="col">总计</div>
                <div class="col col--4em">{{ articlesTotal }}</div>
            </div> -->

      <table id="exportTable" style="width: 80vw">
        <thead>
          <tr>
            <th colspan="2" rowspan="2">序号</th>
            <th colspan="2" rowspan="2">问题类别</th>
            <th colspan="3">自治区领导集中调研（十七个服务小组）</th>
            <th colspan="3">自治区领导交办事项</th>
            <th colspan="3">厅局调研（厅局调研+投资服务专班）</th>
            <th colspan="3">市县调研（空白+市县自主调研）</th>
            <th colspan="3">合计</th>
            <!-- style="width:100px" -->
          </tr>
          <tr>
            <th>总数</th>
            <th>已办结</th>
            <th>已办成</th>
            <th>总数</th>
            <th>已办结</th>
            <th>已办成</th>
            <th>总数</th>
            <th>已办结</th>
            <th>已办成</th>
            <th>总数</th>
            <th>已办结</th>
            <th>已办成</th>
            <th>总数</th>
            <th>已办结</th>
            <th>已办成</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(tag, index) in tagList" :key="index">
            <td colspan="2">{{ index + 1 }}</td>

            <td colspan="2">{{ tag.wtlb }}</td>
            <td>{{ tag.zzqlddyzs }}</td>
            <td>{{ tag.zzqlddyybj }}</td>
            <td>{{ tag.zzqlddycom }}</td>

            <td>{{ tag.zzqldjbzs }}</td>
            <td>{{ tag.zzqldjbybj }}</td>
            <td>{{ tag.zzqldjbcom }}</td>

            <td>{{ tag.tjdyzs }}</td>
            <td>{{ tag.tjdyybj }}</td>
            <td>{{ tag.tjdycom }}</td>

            <td>{{ tag.sxdyzs }}</td>
            <td>{{ tag.sxdyybj }}</td>
            <td>{{ tag.sxdycom }}</td>

            <td>{{ tag.hjzs }}</td>
            <td>{{ tag.hjbj }}</td>
            <td>{{ tag.hjcom }}</td>
          </tr>
          <tr>
            <td colspan="2">-</td>

            <td colspan="2" style="font-size: 14px; font-weight: 600">小计</td>
            <td>{{ XJzzqlddyzs }}</td>
            <td>{{ XJzzqlddyybj }}</td>
            <td>{{ XJzzqlddycom }}</td>
            <td>{{ XJzzqldjbzs }}</td>
            <td>{{ XJzzqldjbybj }}</td>
            <td>{{ XJzzqldjbcom }}</td>
            <td>{{ XJtjdyzs }}</td>
            <td>{{ XJtjdyybj }}</td>
            <td>{{ XJtjdycom }}</td>
            <td>{{ XJsxdyzs }}</td>
            <td>{{ XJsxdyybj }}</td>
            <td>{{ XJsxdycom }}</td>
            <td>{{ XJhjzs }}</td>
            <td>{{ XJhjybj }}</td>
            <td>{{ XJhjcom }}</td>


          </tr>
          <tr>
            <td colspan="2">-</td>

            <td colspan="2" style="font-size: 14px; font-weight: 600">
              问题总数
            </td>
            <td colspan="15" style="font-size: 14px; font-weight: 600">
              {{ Zzs }}
            </td>
          </tr>
          <tr>
            <td colspan="2">-</td>

            <td colspan="2" style="font-size: 14px; font-weight: 600">
              已办结问题总数
            </td>
            <td colspan="18" style="font-size: 14px; font-weight: 600">
              {{ Zybj }}
            </td>
          </tr>
          <tr>
            <td colspan="2">-</td>

            <td colspan="2" style="font-size: 14px; font-weight: 600">
              已办成问题总数
            </td>
            <td colspan="18" style="font-size: 14px; font-weight: 600">
              {{ Zcom }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import mixin from "../mixin";
import XLSX from "xlsx";

import { string, int } from "../util";
export default {
  name: "page-stats-article-gzzb",
  title: "自治区工作专班已分办问题分类办理情况",
  nodes: ["/menu/stats"],
  childs: [],
  mixins: [mixin],
  data: () => ({
    loading: false,
    startTime: null,
    endTime: null,
    tagList: [],
    articlesTotal: 0,
    XJzzqlddyzs:0,
    XJzzqlddyybj:0,
    XJzzqlddycom:0,
    XJzzqldjbzs:0,
    XJzzqldjbybj:0,
    XJzzqldjbcom:0,
    XJtjdyzs:0,
    XJtjdyybj:0,
    XJtjdycom:0,
    XJsxdyzs:0,
    XJsxdyybj:0,
    XJsxdycom:0,
    XJhjzs:0,
    XJhjybj:0,
    XJhjcom:0,

    Zzs:0,
    Zybj:0,
    Zcom:0,

  }),
  methods: {
    exportExcel() {
      const table = document.getElementById("exportTable");
      const ws = XLSX.utils.table_to_sheet(table);

      // 设置单元格样式
      const range = XLSX.utils.decode_range(ws["!ref"]);
      for (let R = range.s.r; R <= range.e.r; ++R) {
        for (let C = range.s.c; C <= range.e.c; ++C) {
          const cellRef = XLSX.utils.encode_cell({ r: R, c: C });
          const cell = ws[cellRef];
          if (!cell) {
            continue;
          }
          cell.s = {
            alignment: {
              horizontal: "right",
              vertical: "center",
            },
          };
        }
      }
      // 自适应内容

      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
      XLSX.writeFile(wb, "自治区工作专班已分办问题分类办理情况表.xlsx");
    },

    search(clean) {
      if (this.loading) return;
      if (clean) this.tagList = [];
      let startTime = this.startTime;
      let endTime = this.endTime;
      if (this.startTime || this.endTime) {
        if (this.startTime < 1704038400000 && this.endTime < 1704038400000) {
          this.startTime = 1686153600000;
          startTime = 1686153600000;
          this.endTime = 1703952000000;
          endTime = 1703952000000;
        }
      }
      this.loading = true;
      this.plugins.user
        .getStatsArticleGzzbV2({ startTime, endTime })
        .then((res) => {
          this.loading = false;
          console.log(res);
          //  return
          if (res.code === 0) {
            this.tagList = res.data;
            this.XJzzqlddyzs = this.tagList.reduce(
              (total, tag) => total + Number(tag.zzqlddyzs),
              0
            );
            this.XJzzqlddyybj = this.tagList.reduce(
              (total, tag) => total + Number(tag.zzqlddyybj),
              0
            );
            this.XJzzqlddycom = this.tagList.reduce(
              (total, tag) => total + Number(tag.zzqlddycom),
              0
            );


            this.XJzzqldjbzs = this.tagList.reduce(
              (total, tag) => total + Number(tag.zzqldjbzs),
              0
            );
            this.XJzzqldjbybj = this.tagList.reduce(
              (total, tag) => total + Number(tag.zzqldjbybj),
              0
            );
            this.XJzzqldjbcom = this.tagList.reduce(
              (total, tag) => total + Number(tag.zzqldjbcom),
              0
            );


            this.XJtjdyzs = this.tagList.reduce(
              (total, tag) => total + Number(tag.tjdyzs),
              0
            );
            this.XJtjdyybj = this.tagList.reduce(
              (total, tag) => total + Number(tag.tjdyybj),
              0
            );
            this.XJtjdycom = this.tagList.reduce(
              (total, tag) => total + Number(tag.tjdycom),
              0
            );


            this.XJsxdyzs = this.tagList.reduce(
              (total, tag) => total + Number(tag.sxdyzs),
              0
            );
            this.XJsxdyybj = this.tagList.reduce(
              (total, tag) => total + Number(tag.sxdyybj),
              0
            );
            this.XJsxdycom = this.tagList.reduce(
              (total, tag) => total + Number(tag.sxdycom),
              0
            );

            this.XJhjzs = this.tagList.reduce(
              (total, tag) => total + Number(tag.hjzs),
              0
            );
            this.XJhjybj = this.tagList.reduce(
              (total, tag) => total + Number(tag.hjbj),
              0
            );
            this.XJhjcom = this.tagList.reduce(
              (total, tag) => total + Number(tag.hjcom),
              0
            );


            this.Zzs = this.tagList.reduce(
              (total, tag) => total + Number(tag.hjzs),
              0
            );
            this.Zybj = this.tagList.reduce(
              (total, tag) => total + Number(tag.hjbj),
              0
            );
            this.Zcom = this.tagList.reduce(
              (total, tag) => total + Number(tag.hjcom),
              0
            );


          } else {
            this.plugins.modal.toast(
              "加载失败<br>" + res.code + "：" + res.msg,
              "error"
            );
          }
        });
    },
    destroy() {
      if (this.loading) return;
      return true;
    },
    init() {
      if (this.loading) return;
      this.loading = true;
      this.$root.$refs.navbar.init();
      this.plugins.user
        .call(
          async () => {
            let res = await this.plugins.user.init();
            if (res.code === 0) {
            }
            return res;
          },
          async () => {
            if (this.access(this.$route.name)) return { code: 0 };
            return this.env.xhrErrors.find((error) => error.code === 4);
          }
        )
        .then((res) => {
          this.loading = false;
          this.$root.$refs.navbar.init();
          if (res.code === 0) {
            this.search();
          } else if (res.code === 2) {
            this.$root.$refs.navbar.login();
          } else {
            this.plugins.modal
              .alert("页面加载失败", res.code + "：" + res.msg, "error")
              .then(() => this.$router.replace("/home"));
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-stats-article-gzzb {
  overflow: hidden;
}

.page-stats-article-policy__body {
  display: flex;
  flex-direction: column;

  & > .row {
    flex: 0 0 auto;
    display: flex;
    width: 640px;

    & > .col {
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0 2px 2px 0;
      padding: 8px 9px;
      color: #333;
      font-size: 14px;
      line-height: 16px;
      text-align: center;
      background-color: #f6f6f6;

      & > .key {
        color: #1677ff;
      }
    }

    & > .col--click {
      cursor: pointer;
    }

    & > .col--2em {
      flex: 0 0 auto;
      width: 2em;
    }

    & > .col--3em {
      flex: 0 0 auto;
      width: 3em;
    }

    & > .col--4em {
      flex: 0 0 auto;
      width: 4em;
    }

    &:first-child {
      & > .col {
        font-weight: bold;
      }
    }
  }
}
table {
  border-collapse: collapse;
  border: 2px solid #ffffff;
}
th,
td {
  border: 2px solid #ffffff;
  padding: 8px;
  text-align: center;
}
th,
td {
  background-color: #f6f6f6;
}
td {
  font-size: 12px;
}
</style>
